(function () {
    $(".monitor .tabs").on("click", "a", function () {
        $(this).addClass("active").siblings("a").removeClass("active");
        $(".monitor .content").eq($(this).index()).show().siblings(".content").hide();
    });
    $(".marquee-view .marquee").each(function () {
      var rows =  $(this).children().clone();
        $(this).append(rows);
    })
})();
(function () {
    var myCharts = echarts.init(document.querySelector(".pie"));
    var option = {
        tooltip: {
            trigger: "item",
            formatter:"{a}<br/>{b} : {c}({d}%)"
        },
         color: [
           "#006cff",
           "#60cda0",
           "#ed8884",
           "#ff9f7f",
           "#0096ff",
           "#9fe6b8",
           "#32c5e9",
           "#1d9dff"
         ],
         series: [
      
            {
                name: '点位模式',
                type: 'pie',
                radius: ["10%", "70%"],
                center: ['50%', '50%'],
                roseType: 'radius',
                
                data: [
                    {value: 20, name: '云南'},
                    {value: 26, name: '北京'},
                    {value: 24, name: '山东'},
                    {value: 25, name: '河北'},
                    {value: 20, name: '江苏'},
                    {value: 25, name: '浙江'},
                    {value: 30, name: '四川'},
                    {value: 42, name: '{a|湖北}'}
                 ],
                 label: {
                     fontSize: 10,
                     color: "#fff",
                     rich: {
                         a: {
                             color: '#1d9dff'
                         }
                     }
                 },
                 labelLine: {
                     length: 3,
                     length2: 5
                 },
                 colorBy: 'data'
            }
        ]
    };
    myCharts.setOption(option);
    window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myCharts.resize();
      });
})();
(function () {
    var barCharts = echarts.init(document.querySelector(".bar"));
    var item = {
        name: '',
        value: 1200,
        itemStyle: {
            color: '#254065'
        },
        emphasis: {
            itemStyle: {
                color: '#254065',
            }
        },
        tooltip: {
            extraCssText: 'opacity: 0'
        }
    };
    
    option = {
        tooltip: {
            trigger: 'item',
        },
        color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                  offset: 0, color: '#00fffb' // 0% 处的颜色
            }, {
            offset: 1, color: '#0061ce' // 100% 处的颜色
            }],
            global: false // 缺省为 false
            },
        grid: {
            left: '0%',
            right: '3%',
            bottom: '3%',
            top: '3%',
            containLabel: true,
            show: true,
            borderColor: 'rgba(0, 240, 255, 0.3)'
            
        },
        xAxis: [
            {
                type: 'category',
                data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
                axisTick: {
                    alignWithLabel: false,
                    show: false
                },
                axisLabel: {
                    color: '#4c9bfd',
                    fontSize: 10
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)'
                    }
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                splitLine: {
                    lineStyle: {
                        color: ['rgba(0, 240, 255, 0.3)']
                    }
                },
                 axisTick: {
                    alignWithLabel: false,
                    show: false
                },
                axisLabel: {
                    color: '#4c9bfd'
                },
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)'
                    }
                },
            }
        ],
        series: [
            {
                name: '直接访问',
                type: 'bar',
                barWidth: '60%',
                data: [2100,1900,1700,1560,1400,item,item,item,900,750,600,480,240]
            }
        ]
    };
    var obj = {
        0: ["20,301,987", 99834],
        1: ["5,100,365", 22345],
        2: ["845,945", 8466],
        3: ["6,659", 2356]
    };
    $(".order .filter").on("click", "a", function () {
        index = $(this).index();
        $(this).addClass("active").siblings().removeClass("active");
        $(".items h4").html(obj[$(this).index()][0]);
        $(".itemss h4").html(obj[$(this).index()][1]);
    });
    var index = 0;
    var timer = setInterval(function () {
        index++;
        if (index >= 4) index = 0;
        $(".order .filter a").eq(index).click();
    }, 2000);
    $(".order .filter").hover(function () {
        clearInterval(timer);
    }, function () {
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            if (index >= 4) index = 0;
            $(".order .filter a").eq(index).click();
        }, 2000);
    });
    
barCharts.setOption(option);
window.addEventListener("resize", function() {
    // 让我们的图表调用 resize这个方法
    barCharts.resize();
  });
})();
(function () {
    var myCharts = echarts.init(document.querySelector(".line"));
    var data = {
        year: [
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ],
        quarter: [
            [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
            [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
        ],
        month: [
            [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
            [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
        ],
        week: [
            [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
            [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
        ]
    };
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            right: '5%',
            textStyle: {
                color: '#4c9bfd',
                fontSize: 10
            }
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            show: true,
            borderColor: '#012f4a',
            containLabel: true
        },
        
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisTick: {    // 清除刻度
                show: false
            },
            axisLabel: {  // 坐标轴字体颜色
                color: '#4c9bfd',
                fontSize: 10
            },
            axisLine: {  // 不显示坐标轴线
                show: false
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
            type: 'value',
             axisTick: {
                show: false
            },
            axisLabel: {
                color: '#4c9bfd',
                fontSize: 10
            },
            splitLine: {
                lineStyle: {
                    color: '#012f4a'
                }
            }
        },
        series: [
            {
                name: '预期销售额',
                type: 'line',
                lineStyle: {
                    color: '#00f2f1'
                },
                smooth: true,
                data: data.year[0]
            },
            {
                name: '实际销售额',
                type: 'line',
                lineStyle: {
                    color: '#ed3f35'
                },
                smooth: true,
                data: data.year[1]
            },
           
        ]
    };
    myCharts.setOption(option);
    $(".sales .caption").on("click", "a", function () {
        index = $(this).index() - 1;
        $(this).addClass("active").siblings("a").removeClass("active");
        var currData = data[this.dataset.type];
        option.series[0].data = currData[0];
        option.series[1].data = currData[1];
        myCharts.setOption(option);
    });
    var index = 0;
    var timer = setInterval(function () {
        index++;
        if (index >= 4) {
            index = 0;
        }
        $(".sales .caption a").eq(index).click();
    },3000);
    $(".sales").hover(function () {
        clearInterval(timer);
    }, function () {
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            if (index >= 4) {
                index = 0;
            }
            $(".sales .caption a").eq(index).click()
        }, 3000);
    });
    window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myCharts.resize();
      });
})();
(function () {
    var myCharts = echarts.init(document.querySelector(".radar"));
    var dataBJ = [
        [90, 19, 56, 11, 34]
    ];
    var lineStyle = {
        normal: {
            width: 1,
            opacity: 0.5,
            color: '#fff'
        }
    };
    var option = {
        tooltip: {
            show: true,
            position: ["60%", "10%"],
            textStyle: {
                fontSize: 6,
            }
        },
        backgroundColor: '#161627',
        radar: {
            indicator: [
               { name: '机场', max: 100 },
               { name: '商场', max: 100 },
               { name: '火车站', max: 100 },
               { name: '汽车站', max: 100 },
               { name: '地铁', max: 100 }
            ],
            radius: '60%',
            shape: 'circle',
            splitNumber: 4,
            name: {
                textStyle: {
                    color: '#4c9bfd'
                }
            },
            splitLine: { // 修改分割线条的样式
                lineStyle: {
                    color: "rgba(255,255,255,.5)"
                }
            },
            splitArea: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(255, 255, 255, 0.5)"
                }
            }
        },
        series: [
            {
                name: '北京',
                type: 'radar',
                lineStyle: lineStyle,
                data: dataBJ,
                symbol: 'circle',
                symbolSize: 5,
                itemStyle: {
                    color: '#fff'
                },
                label: {
                    show: true,
                    color: '#fff',
                    fontSize: 10
                },
                areaStyle: {
                    color: 'rgba(238,197,102,.6)'
                }
            }
        ]
    };
    myCharts.setOption(option);
    window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myCharts.resize();
      });
})();
(function () {
    var myCharts = echarts.init(document.querySelector(".gauge"));
    var option = {
        series: [
            {
                type: 'pie',
                radius: ['130%', '150%'],
                center: ['48%','80%'],
                labelLine: {
                    show: false
                },
                startAngle: 0,
                data: [
                    {value: 200, itemStyle: {color: "transparent"}},
                    {value: 150, itemStyle: {
                        // 颜色渐变#00c9e0->#005fc1
                        color: new echarts.graphic.LinearGradient(
                          // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                          0,
                          0,
                          0,
                          1,
                          [
                            { offset: 0, color: "#00c9e0" }, // 0 起始颜色
                              { offset: 1, color: "#005fc1" } // 1 结束颜色},
                            ]
                            )
                          }
                        },
                    {value: 50, itemStyle: {color:'#12274d'}}
                  
                ]
            }
        ]
    };
    myCharts.setOption(option);
    window.addEventListener("resize", function() {
        // 让我们的图表调用 resize这个方法
        myCharts.resize();
    });
})();
(function () {
    var hotData = [
        {
            city: '北京',  // 城市
            sales: '25,179',  // 销售额
            flag: true, //  上升还是下降
            brands: [   //  品牌种类数据
                { name: '可爱多', num: '9,086', flag: true },
                { name: '娃哈哈', num: '8,341', flag: true },
                { name: '喜之郎', num: '7,407', flag: false },
                { name: '八喜', num: '6,080', flag: false },
                { name: '小洋人', num: '6,724', flag: false },
                { name: '好多鱼', num: '2,170', flag: true },
            ]
        },
        {
            city: '河北',
            sales: '23,252',
            flag: false,
            brands: [
                { name: '可爱多', num: '3,457', flag: false },
                { name: '娃哈哈', num: '2,124', flag: true },
                { name: '喜之郎', num: '8,907', flag: false },
                { name: '八喜', num: '6,080', flag: true },
                { name: '小洋人', num: '1,724', flag: false },
                { name: '好多鱼', num: '1,170', flag: false },
            ]
        },
        {
            city: '上海',
            sales: '20,760',
            flag: true,
            brands: [
                { name: '可爱多', num: '2,345', flag: true },
                { name: '娃哈哈', num: '7,109', flag: true },
                { name: '喜之郎', num: '3,701', flag: false },
                { name: '八喜', num: '6,080', flag: false },
                { name: '小洋人', num: '2,724', flag: false },
                { name: '好多鱼', num: '2,998', flag: true },
            ]
        },
        {
            city: '江苏',
            sales: '23,252',
            flag: false,
            brands: [
                { name: '可爱多', num: '2,156', flag: false },
                { name: '娃哈哈', num: '2,456', flag: true },
                { name: '喜之郎', num: '9,737', flag: true },
                { name: '八喜', num: '2,080', flag: true },
                { name: '小洋人', num: '8,724', flag: true },
                { name: '好多鱼', num: '1,770', flag: false },
            ]
        },
        {
            city: '山东',
            sales: '20,760',
            flag: true,
            brands: [
                { name: '可爱多', num: '9,567', flag: true },
                { name: '娃哈哈', num: '2,345', flag: false },
                { name: '喜之郎', num: '9,037', flag: false },
                { name: '八喜', num: '1,080', flag: true },
                { name: '小洋人', num: '4,724', flag: false },
                { name: '好多鱼', num: '9,999', flag: true },
            ]
        }
    ];
    var li = "";
    $.each(hotData, function (i, ele) {
        li = `<li>
            <span>${ele.city}</span>
            <span>${ele.sales} <s class=${ele.flag ? "icon-up": "icon-down"}></s></span>
          </li>`;
        $(".sup").append(li);
    });
    $(".province .sup").on("mouseenter", "li", function () {
        index = $(this).index();
        rander($(this));
    });
    function rander(that) {
        that.addClass("active").siblings().removeClass();
        var bra = hotData[that.index()].brands;
        // console.log(bra);
        $(".sub").html("");
        $.each(bra, function (i, ele) {
            li = `<li><span>${ele.name}</span><span>${ele.num} <s class=${ele.flag ? "icon-up" : "icon-down"}></s></span></li>`;
            $(".sub").append(li);
        });
    };
    var lis = $(".province .sup li ");
    var index = 0;
    lis.eq(0).mouseenter();
    var timer = setInterval(function () {
        index++;
        if (index >= 5) index = 0;
        rander(lis.eq(index));
    }, 2000);
    $(".province .sup").hover(function () {
        clearInterval(timer);
    }, function () {
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            if (index >= 5) index = 0;
            rander(lis.eq(index));
        }, 2000);
    });
})();
